import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, Row, Col } from 'antd';
import React, { useEffect } from 'react';

const AddCommunicationRecord = props => {
  const { addCommunicationRecordVisible, communicationTitle, communicationDetail, form, onCancel, onSubmit: handleCommunicationRecord } = props;

  // 表单格式
  const layout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 18,
    },
  };

  // 确认
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if (communicationTitle === '新增沟通记录') {
        handleCommunicationRecord(fieldsValue)
      } else {
        handleCommunicationRecord({ ...fieldsValue, id: communicationDetail.id })
      }
    });
  };

  useEffect(() => {
    if (communicationDetail !== {}) {
      form.setFieldsValue({
        callContent: communicationDetail.callContent,
        remark: communicationDetail.remark
      })
    }
  }, [])

  return (
    <>
      <Modal
        title={[
          <div key="title">{communicationTitle}</div>
        ]}
        visible={addCommunicationRecordVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >
        <Row>
          <Col span={24}>
            <Form.Item
              {...layout}
              label="通话内容"
            >
              {form.getFieldDecorator('callContent', {
                rules: [
                  {
                    required: true,
                    message: '请输入通话内容'
                  }
                ]
              })(<Input.TextArea placeholder='请输入' />)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...layout}
              label="备注"
            >
              {form.getFieldDecorator('remark')(<Input.TextArea placeholder='请输入' />)}
            </Form.Item>
          </Col>
        </Row>
      </Modal>
    </>
  );
};

export default Form.create()(AddCommunicationRecord);
